<template>
  <div :data-theme="theme" ref="app">
    <Suspense>
      <div>
        <router-view v-slot="{ Component }">
          <keep-alive>
            <component :is="Component" v-if="$route.meta.keepAlive"/>
          </keep-alive>
          <component :is="Component" v-if="!$route.meta.keepAlive"/>
        </router-view>
      </div>
    </Suspense>
  </div>
</template>

<script setup lang="ts">
import { useAppStore, handleResize } from "@/stores/modules/app";
import {
  ref,
  onMounted,
  onUnmounted,
  onUpdated,
  onBeforeMount,
  onBeforeUpdate,
  onBeforeUnmount,
  onRenderTracked,
  onRenderTriggered,
  onActivated,
  onDeactivated,
  onServerPrefetch,
} from "vue";

// 获取主题
const theme = useAppStore().theme;

const app = ref(null);

// 监测滚动高度变化
const clientHeight = ref(0);
const scrollTop = ref(0);
const scrollHeight = ref(0);
const handleScroll = () => {
  clientHeight.value = document.documentElement.clientHeight;
  scrollHeight.value = document.documentElement.scrollHeight;
  scrollTop.value = document.documentElement.scrollTop;
  if (clientHeight.value + scrollTop.value >= scrollHeight.value) {
    useAppStore().isScrollBottom = true;
  }
  if (clientHeight.value + scrollTop.value >= scrollHeight.value / 2) {
    useAppStore().isScrollMiddle = true;
  } else {
    useAppStore().isScrollMiddle = false;
  }
};

onMounted(() => {
  console.log("onMounted-App");
  // window.addEventListener("scroll", handleScroll);
  // // 监听宽度变化
  // window.addEventListener('resize', handleResize);
  // handleResize();
});

onUnmounted(() => {
  // window.removeEventListener("scroll", handleScroll);
  // window.removeEventListener('resize', handleResize);
});
</script>

<style lang="scss" scoped></style>
